<tc_include file="Public:header" />
<title>用户登录</title>
</head>
<body ontouchstart>
<div class="container">
	<div class="weui-tab__panel login-box" style="padding-bottom: 80px;">
		<!--logo-->
		<h1 class="text-center"><img src="__PUBLIC__/home/img/about-logo.png" width="30%"></h1>
		<!--logo end-->
		<div class="page__bd">
			<div class="weui-cells weui-cells_form">
				<!--phone-->
	      <div class="weui-cell">
	      	  <div class="weui-cell__hd">
	      	    <i class="icon iconfont icon-lphone"></i> 
	      	  </div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="tel" id="number" pattern="[0-9]*" placeholder="请填写手机号">
            </div>
        </div>
        <!--phone end-->
        <!--code-->
        <div class="weui-cell weui-cell_vcode">
        	  <div class="weui-cell__hd">
	      	    <i class="icon iconfont icon-phone-code"></i> 
	      	  </div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="number" id="code" placeholder="输入短信验证码">
            </div>
            <div class="weui-cell__ft">
                <button class="weui-vcode-btn" id="sendsms">获取验证码</button>
            </div>
        </div>
        <div class="weui-cell weui-cell_vcode">
        	  <div class="weui-cell__hd">
	      	    <i class="icon iconfont icon-code"></i> 
	      	  </div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" id="verify" placeholder="请填写验证码">
            </div>
            <li class="weui-cell__ft">
				<li class="weui-vcode-img" id="vcodeimg">{:sp_verifycode_img('length=4&font_size=20&width=150&use_noise=1&use_curve=0','style="cursor: pointer;" title="点击获取"')}</li>
            </div>
        </div>
        <!--code end-->
	    </div>
		</div>
	</div>
</div>
<!--foot button-->
<div class="weui-footer weui-footer_fixed-bottom">
	<label class="weui-agree text-center">
	    <a href="#" >忘记密码？</a>
	</label>
	<a href="javascript:;" onclick="dologin()" class="weui-btn weui-btn_warn">登录</a>
</div>
<!--foot button end-->

<!--BEGIN toast-->
<div id="toast" style="display: none;">
	<div class="weui-mask_transparent"></div>
	<div class="weui-toast">
		<p class="weui-toast__content" id="content"></p>
	</div>
</div>
<!--end toast-->

<script src="__PUBLIC__/home/js/zepto.min.js"></script>
<script src="__PUBLIC__/home/js/weui.min.js"></script>
<script>

	/*短信按钮倒计时*/
    var i;
    var intervalid;
    var state=true;//状态防止多次点击
    var $toast = $('#toast');
    function fun() {
        if (i == 0) {
            $("#sendsms").html("重新发送");
            clearInterval(intervalid);
            state=true;
        }else{
            $("#sendsms").html("重新发送("+i+")");
            i--;
        }
    };
    $("#sendsms").on("click",function() {
        if(state==true){
            i=60;//定义倒计时长 单位 s
            state=false;
            intervalid = setInterval("fun()", 1000);
            var phone = $("#number").val();

            if(phone=='') {
                clearInterval(intervalid);
                state=true;
                errorPrompt('手机号不能为空');
                return false;
            }

            if(!(/^1(3|4|5|7|8)\d{9}$/.test(phone))) {
                clearInterval(intervalid);
                errorPrompt('请输入正确的手机号')
                state=true;
                return false;
            }
            //手机号发送短信
            $.ajax({
                url:"{:U('sqapi/sms/sendValidateCode')}",
                type:"post",
                dataType:'json',
                data:{
                    'mobile':phone,
                },
                success:function(sendstate) {
					if (sendstate.success){
                        errorPrompt('发送成功,请注意查收');
					}else{
                        clearInterval(intervalid);
                        state=true;
                        errorPrompt(sendstate.message);
					}

                }
            })
        }

    })

	function dologin() {
        var phone = $("#number").val();
        if (phone=='') {
            errorPrompt('手机号不能为空');
            return false;
        }
        if (!(/^1(3|4|5|7|8)\d{9}$/.test(phone))) {
            errorPrompt('请输入正确的手机号');
            return false;
        }
        if ($("#code").val() == ''){
            errorPrompt('短信验证码不能为空');
            return false;
		}
        if ($("#verify").val() == ''){
            errorPrompt('图形验证码不能为空');
            return false;
        }
		$.ajax({
			url:"{:U('login/dologin')}",
			type:'post',
			dataType:'json',
			data:{
				'userName':$("#number").val(),
				'smsValidateCode':$("#code").val(),
				'imgValidateCode':$("#verify").val()
			},
			success:function(data){
				if (data.success == false){
					errorPrompt(data.message);
                    $(".verify_img").click();
				}else{
                    location.href="{:U($par.'/index')}";
				}
			}
        })
    }

    function errorPrompt(explain){
        $("#content").html(explain);
        $toast.fadeIn(100);
        setTimeout(function () {
            $toast.fadeOut(100);
        }, 2000);
	}

</script>
</body>
</html>
